<template>
  <div class="un-search-container">
    <div v-if="list.length > 0">
      <div class="title">以下是搜索结果</div>
      <div class="list">
        <div v-for="(temp,index) in list" :key="index" class="searchlist" @click="routerLink(temp)">
          <img :src="temp.poster | cover" alt="" class="longImg">
        </div>
      </div>
    </div>
    <div v-else>
      <div class="no">
        <div class="iconfont search-icon icon-kong"></div>
        <div class="shuoming">未搜索到内容</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { mapGetters } from "vuex";
export default {
  filters: {
    cover(posters) {
      if (!posters) return "http://placehold.it/640x1280";
      return posters.split(",")[0];
    }
  },
  computed: {
    ...mapGetters(["list"])
  },
  mounted() {
    console.log(this.list);
    console.log(this.$store.state.list);
  },
  methods: {
    routerLink(project) {
      if (project.type == 2 || project.type == 3) {
        ImagePreview(project.poster.split(","));
      }
      if (project.href) {
        window.location.href = project.href;
      }
    }
  }
};
</script>

<style lang="less">
.un-search-container {
  width: 100%;
  padding: 0 3vw;
  box-sizing: border-box;
  .no {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 50%;
    .search-icon {
      font-size: 62px;
      color: #dadada;
    }
    .shuoming {
      font-size: 14px;
      color: #808080;
    }
  }
  .title {
    color: #808080;
    font-size: 14px;
    display: block;
  }
  .list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: relative;
    .searchlist {
      width: 45%;
      height: 250px;
      overflow: hidden;
      margin: 10px 7px;
      background: #f1f1f1;
      border-radius: 5px;
      flex-wrap: wrap;
      img {
        width: 100%;
      }
    }
  }
}
</style>